function Magnifier(){}
$.extend(Magnifier.prototype,{
    init:function(data){
        this.big_img = $(".pic");
        this.big_warpper = $("#big_img");
        this.cube     = $(".cube");
        this.cube[0].style.backgroundImage = "url("+ data.bigimg[0] + ")";

        this.left_warpper = $(".big-img");
        this.left_img     = $(".big-img img");
        this.left_img[0].src = data.bigimg[0];

        this.img_btns_wrapper   =$(".pic_list ul");
        this.img_btns    =  this.img_btns_wrapper.children();

        this.big_warpper.on("mouseenter",$.proxy(function(){
            this.show()
        },this))
        this.big_warpper.on("mouseleave",$.proxy(function(){
            this.hide();
        },this))
        this.big_warpper.on("mousemove",$.proxy(function(){
            this.handlerMove()
        },this))
        this.img_btns_wrapper.on("mouseenter","img",$.proxy(function(){
            this.changeImg()
        },this))
    },
    show:function(){
        this.cube.css("display","block");
        this.left_warpper.css("display","block");
        this.big_img.css("opacity","0.3");
    },
    hide:function(){
        this.cube.css("display","none");
        this.left_warpper.css("display","none");
        this.big_img.css("opacity","1");
    },
    handlerMove(evt){
        var e = evt || window.event;
        var x = e.pageX - this.big_warpper.offset().left - this.cube.width()/2;
        var y = e.pageY - this.big_warpper.offset().top - this.cube.height()/2;

        var cube_position = this.boundar(x,y);
        var more_position = this.getMorePosition(cube_position.x,cube_position.y);
        this.move(cube_position,more_position);
    },
    boundar:function(x,y){
        x = x <= 0 ? 0 : x;
        var maxX = this.big_warpper.width() - this.cube.width();
        x = x >= maxX ? maxX : x;

        y = y <= 0 ? 0 : y;
        var maxY = this.big_img.height() - this.cube.height();
        y = y >= maxY ? maxY : y;
        return{
            x : x,
            y : y
        }
    },
    getMorePosition:function(x,y){
        var propx = x/(this.big_warpper.width() - this.cube.width());
        var bigX  = parseInt(propx * (this.left_warpper.width() - this.left_img.width()));
        var propy = y/(this.big_warpper.height() - this.cube.height());
        var bigY  = parseInt(propy * (this.left_warpper.height() - this.left_img.height()));

        return{
            bigX : bigX,
            bigY : bigY
        }
    },
    move : function(cube_position,more_position){
        this.cube.css({
            left : cube_position.x,
            top  : cube_position.y,
            backgroundPositionX : -cube_position.x ,
            backgroundPositionY : -cube_position.y,
        })
        this.left_img.css({
            left : more_position.bigX,
            top  : more_position.bigY,
        })
    },
    changeImg:function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        var li = $(target).parent().parent();
        li.addClass("red")
        .siblings()
        .removeClass("red");
        var img_src = $(target).attr("img-id");
        this.big_img.attr("src",img_src);
        this.cube[0].style.backgroundImage = "url("+ img_src + ")";
        this.left_img[0].src  = img_src;
    }
})
export default new Magnifier();